<template>
  <div>
    <div class="block">
      <el-date-picker
        v-model="query.data.startTime"
        type="date"
        placeholder="选择开始日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>至
      <el-date-picker
        v-model="query.data.endTime"
        type="date"
        placeholder="选择结束日期"
        value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-button type="primary" icon="el-icon-search" style="margin: 20px" @click="selectByPage">搜索</el-button>
    </div>
    <div>
      <el-table stripe style="width: 100%" :data="list">
        <el-table-column label="轴号" prop="inZh"></el-table-column>
        <el-table-column label="轴型" prop="zhouxing"></el-table-column>
        <el-table-column label="日期" prop="inSrrq"></el-table-column>
        <el-table-column label="车轴制造厂代号" prop="inCzZzdw"></el-table-column>
        <el-table-column label="轴端" prop="type"></el-table-column>
        <el-table-column label="扭力1" prop="num1"></el-table-column>
        <el-table-column label="扭力2" prop="num2"></el-table-column>
        <el-table-column label="扭力3" prop="num3"></el-table-column>
        <el-table-column label="扭力4" prop="num4"></el-table-column>
        <el-table-column label="操作人" prop="createUser"></el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[ 10,20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Home",
  created() {
    this.selectByPage();
  },
  data() {
    return {
      query: {
        data: {
          startTime: "",
          endTime: "",
        },
        limit: 10,

        page: 1,
      },
      total: 0,
      list: [],
    };
  },

  methods: {
    async selectByPage() {
      const result = await this.$http.post(
        "cld/selectByPage",
        this.query
      );
      if (result.data.code !== 1) {
        return this.$message.error(result.data.message);
      }
      console.log(result.data.data);
      this.list = result.data.data.records;
      this.total = result.data.data.total;
      //this.
      //this.query.page=result.data.data.current
      //this.query.limit=result.data.data.size
    },
    handleSizeChange(val) {
      console.log("~~~~~");
      console.log(val);
      this.query.limit = val;
      this.selectByPage();
    },
    handleCurrentChange(val) {
      console.log("===============");
      console.log(val);
      this.query.page = val;
      this.selectByPage();
    },
  },
};
</script>
